<template>
  <el-calendar>
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <template slot="dateCell" slot-scope="{date, data}">
      <div class="solar">{{ data.day.split('-')[2] }}</div>
      <div
        class="lunar"
        :class="{ festival : isFestival(date, data) }"
      >{{ solarToLunar(date, data) }}</div>
    </template>
  </el-calendar>
</template>

<script>
import { calendar } from '../../../utils/calender'
export default {
    name: 'v-calender',
    mounted () {
        this.getHoliday()
    },
    methods: {

        getHoliday () {
            // 获取接口提供的接口
        },
        // bug '2020-1-1 === 2020-01-01 ' true
        compareTwoDateString (a, b) {
            return new Date(a + '0:0').getTime() === new Date(b + '0:0').getTime()
        },
        // 是否节假日
        isFestival (slotDate, slotData) {
            let solarDayArr = slotData.day.split('-')
            let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

            // 公历节日\农历节日\农历节气
            let festAndTerm = []
            festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
            festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
            festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
            festAndTerm = festAndTerm.join('')

            return festAndTerm != ''
        },
        // 公历转农历
        solarToLunar (slotDate, slotData) {
            let solarDayArr = slotData.day.split('-')
            let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

            // 农历日期
            let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn

            // 公历节日\农历节日\农历节气
            let festAndTerm = []
            festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
            festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
            festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
            festAndTerm = festAndTerm.join('')

            return festAndTerm == '' ? lunarMD : festAndTerm
        }
    }
}
</script>